<template>
  <div class="searchResult">
    <div class="result" v-for="(data, index) in resultList" :key="index">
      <!-- 标题部分 -->
      <div class="title">
        <div class="count">{{ data.list.length }}</div>
        <div class="titleContent">
          <img :src="require('@/assets/icon/' + data.icon)" />
          <span>{{ data.title }}</span>
        </div>
        <div></div>
      </div>
      <!-- 内容部分 -->
      <transition name="fade">
        <div class="contentList" v-show="contentShow">
          <div
            class="content"
            v-for="(content, index1) in data.list"
            :key="index1"
            @click="modSelect(content)"
          >
            <span class="index">{{ index1 + 1 }}</span>
            <span>{{ content.modName.split(" ")[1] }}</span>
            <!-- <span>{{
              content.modName.split(" ")[1] +
              "-" +
              (!content.modName.split(" ")[2]
                ? "未知"
                : content.modName.split(" ")[2])
            }}</span> -->
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
/*eslint-disable*/
import { getCurrentInstance, onMounted } from "vue";
import pubsub from "pubsub-js";
import { useStore } from "vuex";

import mainApi from "@/api/mainApi";

export default {
  name: "搜索结果",
  props: {
    propsData: {
      type: Object,
      default: "",
    },
  },
  data() {
    return {
      resultList: [],
      contentShow: false,
      subList: [],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const store = useStore();
    const keyValueList = {
      face: "球员面补",
      jersey: "NBA球衣",
      blacktop: "街头球场",
      court: "NBA球场",
      packing: "Mod整合包",
    };

    onMounted(() => {
      mainApi.writeDailyLog("初始化渲染完成" + "--SearchResult.vue");
      subscribe();
      dataSort(proxy.propsData.dataList || store.state.searchResult);
    });

    // 数据整理
    function dataSort(newData) {
      // console.log(newData);
      // 关闭显示
      proxy.contentShow = false;
      // 清空结果列表
      proxy.resultList = [];
      let titleList = [""];
      // 类型名提取
      newData.forEach((element) => {
        let isNew = true;
        titleList.forEach((title) => {
          if (element.type === title) isNew = false;
        });
        if (isNew) titleList.push(element.type);
      });
      titleList.splice(0, 1);
      // 按类型整理
      titleList.forEach((title) => {
        let list = [];
        newData.forEach((element) => {
          if (element.type === title) {
            list.push(element);
          }
        });
        // 载入数组
        proxy.resultList.push({
          title: keyValueList[title],
          list,
          icon: title + "-0.png",
        });
        // console.log(list);
      });
      // console.log(proxy.resultList);
      // 开启显示
      setTimeout(() => {
        mainApi.writeDailyLog("搜索结果显示" + "--SearchResult.vue");
        proxy.contentShow = true;
      }, 300);
      // 数据存入vuex
      if (proxy.propsData.dataList != undefined)
        store.commit("writeSearchResult", proxy.propsData.dataList);
    }

    // mod选择
    function modSelect(data) {
      if (data.type === "jersey") return;
      console.log(data);
      mainApi.writeDailyLog("页面跳转至详细界面" + "--SearchResult.vue");
      // 页面跳转至详细界面
      pubsub.publish("routerChange", {
        contentAuthor: data.modName.split(" ")[2],
        contentName: data.modName,
        contentType: data.type,
        startComponent: data.type,
        targetComponent: data.type === "packing" ? "packingDetail" : "detail",
      });
    }

    // pubsub订阅
    function subscribe() {
      proxy.subList.push(
        pubsub.subscribe("routerChange", (n, data) => {
          if (data.targetComponent === "searchResult")
            dataSort(data.dataList || store.state.searchResult);
        })
      );
    }

    return {
      modSelect,
    };
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
@import "../less/variables.less";
.searchResult {
  display: flex;
  flex-direction: row;
  > .result {
    flex: 1;
    text-align: center;
    max-width: 20%;
    > .title {
      padding: 5%;
      font-size: @font4;
      > .titleContent {
        > img {
          width: 25px;
          margin-right: 2%;
          margin-bottom: -1.5%;
        }
      }
      > .count {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: @red;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 60%;
        float: right;
        position: relative;
      }
      > div:last-child {
        background-color: @red;
        float: left;
        position: relative;
        left: 40%;
        bottom: -5px;
        width: 20%;
        height: 5px;
        border-radius: 15px;
      }
    }

    > .contentList {
      margin: 3%;
      border-radius: 5px;
      box-shadow: @box-shadowRed;
      > .content {
        padding: 5%;
        > .index {
          float: left;
        }
      }
      > .content:hover {
        color: @red;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}

.fade-enter-active {
  transition: all 0.3s;
}
.fade-enter-from {
  transition: 0.3s;
  transform: translateY(-10%);
}
</style>